<template>
    <div @click="clickHandle" class="item" :class="{'active': active}">
        {{label}}
    </div>
</template>
<script>
export default {
    props: {
        label: {
            type: String,
            default: ''
        },
        active: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        clickHandle () {
            this.$emit('click')
        }
    }
}
</script>
<style scoped>
.item{
    display: inline-block;vertical-align: middle;
    color: #51cfff; cursor: pointer;height: 0.4rem;line-height: 0.4rem ;width: 1.1rem;text-align: center;
    border: 1px solid #51cfff;font-size: 0.14rem;
}
.item.active{
    color: #ff9c00;
    border: 1px solid #ff9c00;
}
</style>